<template>
  <div class="middleMenu">
    <div class="menu-wrapper">
      <a class="item qiandao" @click="toQianDao">
        <div class="icon"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_sign.png"></div>
        <p class="label"><span>每日签到</span></p>
      </a>
      <a class="item chouqiang" @click="toChouQiang">
        <div class="icon"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_lottery.png"></div>
        <p class="label"><span>每日抽奖</span></p>
      </a>
      <a class="item" @click="toOrderList">
        <div class="icon"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_order.png"></div>
        <p class="label"><span>我的订单</span></p>
      </a>
      <a class="item" @click="toCart">
        <div class="icon"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_cart.png"></div>
        <p class="label"><span>购物车</span></p>
      </a>
      <a class="item" @click="toBalance">
        <div class="icon"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_recharge.png"></div>
        <p class="label"><span>余额充值</span></p>
      </a>
      <a class="item" @click="toConsigneeList">
        <div class="icon"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_address.png"></div>
        <p class="label"><span>送餐地址</span></p>
      </a>
      <a class="item" v-link="{path: '/freeBack'}">
        <div class="icon"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_feedback.png"></div>
        <p class="label"><span>意见反馈</span></p>
      </a>
      <a class="item" @click="callPhone">
        <div class="icon"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_phone.png"></div>
        <p class="label"><span>客服热线</span></p>
      </a>
      <a class="item" @click="toMore">
        <div class="icon"><img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_more.png"></div>
        <p class="label"><span>更多</span></p>
      </a>
    </div>
  </div>
</template>
<script>
  import {couponClick, selectedCoupon, addressClick, detailActivitys} from './../../../vuex/getters.js'
  import {
    set_couponClick,
    set_selectedCoupon,
    update_address_click,
    set_detailActivitys
  } from './../../../vuex/actions.js'
  var LocalStorageUtil = require('./../../../commons/js/LocalStorageUtil.js')
  export default {
    data () {
      return {
        qianDao: '',
        chouJiang: ''
      }
    },
    components: {},
    vuex: {
      getters: {
        couponClick,
        selectedCoupon,
        addressClick
      },
      actions: {
        set_couponClick,
        set_selectedCoupon,
        update_address_click
      }
    },
    ready: function () {
      var detailActivitys = LocalStorageUtil.getItem("detailActivitys")
      var userInfo = LocalStorageUtil.getItem("User")
      this.qianDao = detailActivitys[0].linkUrl + "?userId=" + userInfo.id
      this.chouJiang = detailActivitys[1].linkUrl + "?userId=" + userInfo.id
    },
    methods: {
      onItemClick () {
        console.log('on item click')
      },
      callPhone () {
        location.href = "tel:4006059144"
      },
      toQianDao () {
        if (this.judgeLogin()) {
          $(".middleMenu .qiandao").attr("href", this.qianDao)
        }
      },
      toChouQiang () {
        if (this.judgeLogin()) {
          $(".middleMenu .chouqiang").attr("href", this.chouJiang)
        }
      },
      toMore () {
        if (this.judgeLogin()) {
          this.$router.go({path: '/more'})
        }
      },
      toConsigneeList () {
        if (this.judgeLogin()) {
          this.$router.go({path: '/addressList'})
        }
      },
      toOrderList () {
        if (this.judgeLogin()) {
          this.$router.go({path: '/orderList'})
        }
      },
      toRecharge () {
        if (this.judgeLogin()) {
          this.$router.go({path: '/balance'})
        }
      },
      toCart() {
        if (this.judgeLogin()) {
          this.set_couponClick(false);
          this.set_selectedCoupon('');
          this.update_address_click(false);
          this.$router.go({path: '/cart'})
        }
      },
      judgeLogin () {
        if (!LocalStorageUtil.getItem("User") || !LocalStorageUtil.getItem("User").id) {
          this.$router.go({path: '/login'})
          return false
        }
        return true
      },
      toBalance(){
        if (this.judgeLogin()) {
          this.$router.go({path: '/balance'})
        }
      }
    }
  }
</script>
<style>
  .middleMenu {
    position: relative;
    width: 100%;
    font-family: "Microsoft Yahei";
  }

  .middleMenu .menu-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .middleMenu .menu-wrapper .item {
    position: relative;
    width: 33.3333%;
    display: block;
    padding: 2rem 1rem;
    box-sizing: border-box;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
  }

  .middleMenu .menu-wrapper .item:nth-child(3n+0) {
    border-right: 0;
  }

  .middleMenu .menu-wrapper .item:nth-child(7),
  .middleMenu .menu-wrapper .item:nth-child(8),
  .middleMenu .menu-wrapper .item:nth-child(9) {
    border-bottom: 0;
  }

  .middleMenu .menu-wrapper .item .icon {
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto;
  }

  .middleMenu .menu-wrapper .item .icon img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .label {
    display: block;
    text-align: center;
    color: #000000;
    font-size: 1.3rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 2px;
    color: #888;
  }
</style>
